<template>
  <div id="app">
    <div class="left">
      <Menu :theme="theme2"  width="200px">
   		  <Submenu name="1">
   					<template slot="title">
   							<Icon type="ios-paper" />
   							商品详情
   					</template>
   					<MenuItem to="/administration" name="1-1">商品管理</MenuItem>
   					<MenuItem to="/grouping" name="1-2">商品分组</MenuItem>
   					<MenuItem to="/template" name="1-3">商品页模板</MenuItem>
   					<MenuItem to="/import" name="1-4">商品导入</MenuItem>
   					<MenuItem to="/batch" name="1-5">批量改价</MenuItem>
   			</Submenu>
				   <Submenu name="5">
   					<template slot="title">
   							<Icon type="ios-paper" />
   							页面管理
   					</template>
   					<MenuItem to="/editor" name="5-1">商品管理</MenuItem>
   			</Submenu>
   			<Submenu name="2">
   											<template slot="title">
   													<Icon type="ios-people" />
   													用户管理
   											</template>
   											<MenuItem name="2-1">新增用户</MenuItem>
   											<MenuItem name="2-2">活跃用户</MenuItem>
   									</Submenu>
   									<Submenu name="3">
   											<template slot="title">
   													<Icon type="ios-stats" />
   													统计分析
   											</template>
   											<MenuGroup title="使用">
   													<MenuItem to="/test1" name="3-1">新增和启动</MenuItem>
   													<MenuItem to="/test2" name="3-2">活跃分析</MenuItem>
   													<MenuItem to="/test3" name="3-3">时段分析</MenuItem>
   											</MenuGroup>
   											<MenuGroup title="留存">
   													<MenuItem name="3-4">用户留存</MenuItem>
   													<MenuItem name="3-5">流失用户</MenuItem>
   											</MenuGroup>
   			</Submenu>
   		</Menu>
    </div>
    <div class="right">
        <router-view/>
    </div>
  </div>
</template>

<script>
import api from "./api"
export default {
  name: 'App',
  data(){
    return {
      theme2:"dark"
    }
  },
  mounted(){
//     api.getbanner({
//       success:function(e){
//         console.log(e)
//       }
//     })
  }
}
</script>

<style>

body,
html{
  height: 100%;

}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  height: 100%;
  background-color: #f8f8f8;

}
.left{
  width: 200px;
  height: 100%;
  background-color: rgb(80, 90, 110)
}
.right{
  width: 1500px;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
  /* flex-grow: 1; */
  background-color: #fff;
}
</style>
